<template>
    <div class="div1">
        <div class="login-container">
            <h2>登录</h2>
            <div class="form-group">
                <label for="identifier" style="color: black">用户名/手机号</label>
                <input v-model="identifier" type="text" id="identifier" placeholder="用户名/手机号"/>
            </div>
            <div class="form-group">
                <label for="password" style="color: black">密码</label>
                <input v-model="password" type="password" id="password" placeholder="密码"/>
            </div>
            <div class="form-group" style="width: 100px; margin-left: 240px;margin-top: 40px">
                <button @click="logon">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                identifier: '',
                password: '',
            };
        },
        methods: {
            logon() {
                if (this.identifier === "") {
                    this.$message.error('请输入用户名或手机号');
                } else if (this.password === "") {
                    this.$message.error('请输入密码');
                } else {
                    this.axios.get("http://localhost:8080/admin/logon", {
                        params: {
                            identifier: this.identifier,
                            password: this.password,
                        }
                    }).then(resp => {
                        const r = resp.data;
                        console.log(r)
                        if (r.data === 1) {
                            this.$message({
                                message: '登录成功！',
                                type: 'success',
                                duration: 1500 // 消息自动消失的时间（毫秒）
                            });
                            // 保存登录状态
                            sessionStorage.setItem('isLoggedIn', 'true');
                            sessionStorage.setItem('identifier', this.identifier);
                            //页面切换
                            this.$emit('login-success');
                        } else {
                            if (r.data === -1) {
                                this.$message.error('用户名或手机号不存在');
                            } else {
                                this.$message.error('密码错误');
                            }
                        }
                    }).catch(error => {
                        console.error("Login failed:", error);
                        this.$message.error('登录失败，请稍后再试');
                    });
                }
            }
        },
        created() {
            const isLoggedIn = sessionStorage.getItem('isLoggedIn');
            if (isLoggedIn === 'true') {
                const identifier = sessionStorage.getItem('identifier');
                // 这里可以执行一些操作，比如自动登录或跳转到主页
                this.$emit('login-success');
            }
        }
    }
</script>

<style scoped>
    .login-container {
        max-width: 360px;
        margin: 220px auto;
        padding: 30px;
        border: 1px solid transparent;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        background-color: #f9f9f9;
        background-color: rgba(249, 249, 249, 0.4); /* 添加透明度 */
    }

    .login-container h2 {
        text-align: center;
        color: #333;
        margin-bottom: 20px;
        font-size: 24px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
    }

    .form-group input {
        width: calc(100% - 20px);
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        font-size: 16px;
        background-color: rgba(255, 255, 255, 0.5);
    }

    .form-group input:focus {
        border-color: #007bff;
        outline: none;
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
    }

    .form-group button {
        width: 100%;
        padding: 12px;
        background-color: #007bff;
        border: none;
        border-radius: 5px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        background-color: rgba(0, 123, 255, 0.8); /* 添加透明度 */
    }

    .div1 {
        border: 1px transparent solid;
        margin: 0;
        padding: 0;
        background-color: black;
        width: 100%;
        height: 900px;
        background-image: url('/src/assets/img_b6f40530b5956f50_US9yL0NLTFhwcHNRb0o5V0RKUDBxNGhKcEVVdTJrZVZSbnlOb0dCSFpKYz0.gif');
        background-size: cover; /* 使背景图像覆盖整个容器 */
        background-position: center; /* 背景图像居中 */
    }
</style>